<template>
	<view>
		<view class="tab">
			<view class="nav" :class="navIndex==1?'activite':''" @click="checkIndex(1)">进行中</view>
			<view class="nav"  :class="navIndex==2?'activite':''" @click="checkIndex(2)">已完成</view>
			<view class="nav"  :class="navIndex==3?'activite':''" @click="checkIndex(3)">未开始</view>
		</view>
		<view class="content" v-if="navIndex==1">
			<view class="box" @click="change()">
			<view class="small smalls">
				<image src="../../static/长征.jpg" class="simg"></image>
				<p> 长征路线</p>
				</view>
						
			</view>
		</view>
		<view class="content" v-if="navIndex==2">
			<view class="box" @click="changes()">
			<view class="small smalls">
				<image src="../../static/海.jpg" class="simg"></image>
				<p> 西气东输路线</p>
				</view>
						<p class="red">已完成</p>
			</view>
		</view>
		<view class="content" v-if="navIndex==3">
			<view class="box">
				<view class="small" @click='openPopup'>
					<image src="../../static/西气东输.jpg" class="simg"></image>
					<p> 西气东输路线</p>
					<view class="ash"><image src="../../static/锁.png"></image></view>			
				</view>
				<view class="small" @click='openPopup'>
					<image src="../../static/OIP-C.jpg" class="simg"></image>
					<p> 西藏出行路线</p>
					<view class="ash"><image src="../../static/锁.png"></image></view>			
				</view>
				<view class="small" @click='openPopup'>
					<image src="../../static/丝绸之路.jpg" class="simg"></image>
					<p> 丝绸之路路线</p>
					<view class="ash"><image src="../../static/锁.png"></image></view>			
					
				</view>
				
				<uni-popup ref='popup' type="center">
							<view class="pop"><p>该路线未开始</p><image src="../../static/叉号.png" @click="closePopup" class="no"></image></view>
							
				</uni-popup>
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navIndex:1
			}
		},
		methods: {
			change() {
				uni.navigateTo({
					url: '/pages/index/go'
									})
			},
			changes() {
				uni.navigateTo({
					url: '/pages/my/bu1'
									})
			},
checkIndex(index){
				this.navIndex=index;
			},
			onReady() {},openPopup(){
				this.$refs.popup.open();
			},
			closePopup(){
				this.$refs.popup.close();
			}
		}
	}
</script>

<style>
	@import url("route.css");
</style>